@mixin box {
	background: rgba(250, 250, 250, .3);

	display: block;
	margin: 0 0 30px;
	padding: 30px;

	-moz-box-shadow: 1px 1px 2px rgba(60, 60, 60, .6), inset 1px 1px 2px rgba(250, 250, 250, .6);
	-webkit-box-shadow: 1px 1px 2px rgba(60, 60, 60, .6), inset 1px 1px 2px rgba(250, 250, 250, .6);
	-o-box-shadow: 1px 1px 2px rgba(60, 60, 60, .6), inset 1px 1px 2px rgba(250, 250, 250, .6);
	-ms-box-shadow: 1px 1px 2px rgba(60, 60, 60, .6), inset 1px 1px 2px rgba(250, 250, 250, .6);
	box-shadow: 1px 1px 2px rgba(60, 60, 60, .6), inset 1px 1px 2px rgba(250, 250, 250, .6);

	@include border-radius(4px);

	> *:first-child, 
	> form:first-child > *:first-child {
		margin-top: 0;
	}

	> h2:first-child {
		text-shadow: 1px 1px 1px rgba(250, 250, 250, .6);
	}

	> *:last-child, 
	> form:last-child > *:last-child {
		margin-bottom: 0;
	}
}

@mixin message {
	background: #fefefe url(#{$WEBROOT}Sites/SleekMobile/Styles/SleekMobile/CSS/Icons/Tango/16x16.png) no-repeat 10px -126px;

	display: block;
	padding: 10px 10px 10px 36px;

	border: 1px solid #e6e6e6;
	@include border-radius(3px);

	> *:first-child {
		margin-top: 0;
	}

	> *:last-child {
		margin-bottom: 0;
	}

	h1, h2, h3, h4, h5, h6 {
		font-size: $large-size;
		font-weight: bold;
		margin: 0;
	}
}

@mixin message-error {
	@include message;
	background-position: 10px -2099px; // -11188px
	background-color: #fdd;
	border-color: $error-color;
	color: $error-color;
}

@mixin message-warning {
	@include message;
	background-position: 10px -3549px;
	background-color: #FFD;
	border-color: #F90;
	color: #F60;
}

@mixin message-success {
	@include message;
	background-position: 10px -6389px; // -4211px
	background-color: #EFD;
	border-color: #9D9;
	color: #393;
}

@mixin message-help {
	@include message;
	background-position: 10px -6652px;
	// TODO: colors
}

@mixin message-info {
	@include message;
	// TODO: bg + colors
}

@mixin separated {
	padding-bottom: 20px;
	margin-bottom: 20px;
	border-bottom: 1px solid $separator-color;
}

@mixin button {
	@include linear-gradient(darken($gray-color, 5%), darken($gray-color, 15%));

	display: inline-block;
	padding: 10px 15px;

	color: #fefefe;
	text-decoration: none;
	font-size: $small-size;
	font-weight: bold;
	text-shadow: 0 -1px 1px rgba(0, 0, 0, .4);

	border: 1px solid #ccc;

	@include border-radius(4px);
	@include box-shadow(0 0 1px rgba(0, 0, 0, .2));

	&:hover, 
	&.login-theme-selected, 
	&.jquery-3d-circle-selected {
		@include linear-gradient($gray-color, darken($gray-color, 10%));

		text-decoration: none;
		color: #444;
		text-shadow: 0 -1px 1px rgba(250, 250, 250, .4);

		border-color: #aaa;
		@include box-shadow(0 0 1px rgba(0, 0, 0, .4));
	}

/*	&:after {
		content: " ›";
	} */
}
